<template>
  <div class="book-container">
    <div class="book-content classified-display">
      <div class="header-title">
        <span class="title">{{ title || '' }}</span>
        <div class="recommend-list">
          <router-link
            class="recommend-item"
            v-for="(item, index) in recommend"
            :key="index"
            :to="{path: item.path || '#'}">
            {{ item.title }}
          </router-link>
        </div>
      </div>
      <book-row type="flex">
        <book-col :span="17" class="lside">
          <titleBar
            :title="lsideOptions.title"
            :learnMore="lsideOptions.learnMore"
            :shareData="lsideOptions.shareData">
          </titleBar>
          <bookGrid5x2 :data="bookData"></bookGrid5x2>
        </book-col>
        <book-col :span="7">
          <titleBar
            :title="rsideOptions.title"
            :learnMore="rsideOptions.learnMore"
            :shareData="rsideOptions.shareData">
          </titleBar>
          <bookGrid1xn :data="bookStoreData"></bookGrid1xn>
        </book-col>
      </book-row>
    </div>
  </div>
</template>

<script>
import titleBar from '@/bookComponents/title/index'
import bookGrid5x2 from '@/bookComponents/gridLayout/bookGrid5x2'
import bookGrid1xn from '@/bookComponents/gridLayout/bookGrid1xn'

export default {
  name: 'classifiedDisplay',
  components: {
    titleBar,
    bookGrid5x2,
    bookGrid1xn
  },
  props: {
    title: {
      type: String
    },
    lsideOption: {
      type: Object,
      defulat: () => {}
    },
    rsideOption: {
      type: Object,
      defulat: () => {}
    },
    recommend: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      defulat: 'bookstore'
    },
    bookData: {
      type: Array,
      default: () => []
    },
    bookStoreData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    lsideOptions () {
      return {
        title: this.lsideOption.title || '',
        learnMore: this.lsideOption.learnMore || false,
        shareData: this.lsideOption.shareData || false
      }
    },
    rsideOptions () {
      return {
        title: this.rsideOption.title || '',
        learnMore: this.rsideOption.learnMore || false,
        shareData: this.rsideOption.shareData || false
      }
    }
  }
}
</script>

<style lang="scss" scope>
  .lside {
    border-right: 1px dashed #AFAFAF;
  }
  .classified-display {
    .book-title-content {
      border-bottom: none;
      .title {
        margin-left: 10px;
      }
    }
    padding: 20px 0;
    .header-title {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      margin: 10px 0;
      .title {
        color: #000000;
        font-size: 25px;
        font-weight: 700;
        margin-right: 15px;
      }
      .recommend-list {
        .recommend-item {
          color: #365889;
          text-decoration: none;
          margin: 0 5px;
          &:hover {
            color: #8C222C;
          }
        }
      }
    }
  }
</style>
